import { FC, useState, useMemo, useEffect } from 'react';
import ApiCollector from '@/const/apis';
import useMockRequest from '@/hooks/useMockRequest';
import { useLocation, useNavigate } from "react-router-dom";
import useListPages from '@/hooks/useListPages';
import FetchTips from '@/components/fetchTips';
import Layout from '@/components/layout';
import ListLoader from '@/components/skeleton/listLoader';
import Lines from '@/components/echarts';
import ContentEcharts from '@/components/contentEcharts';
import styles from './index.module.less';
import Card from '@/components/card';
import big from '@/images/big.png';
import small from '@/images/small.png';
import ComNavBar from '@/components/comNavBar';
import { routesUrl } from '@/const/routes';
import get from 'lodash/get';
import dayjs from 'dayjs';
import { returnFloat, returnFloatTime } from '@/utils/tool';

const grid = {
    top: "10%",
    bottom: '3%',
    left: '6%',
    right: '4%',
}
const gridFull = {
    top: "5%",
    bottom: '10%',
    left: '6%',
    right: '8%',
}
const SystemDetail = () => {
    const location = useLocation();
    const navigate = useNavigate();
    // const { loading, list, ifDone } = useListPages(ApiCollector.getSysList, {});  后期分页
    const [fullScreenOpenOrClose, setFullScreenOpenOrClose] = useState(false)
    const [fullScreenTitle, setFullScreenTitle] = useState('')
    const [echartsData, setEchartsData] = useState([])
    const [title, setTitle] = useState('');
    
    const { data, error, loading, run, refresh } = useMockRequest(ApiCollector.getYwmk, {
        data: { ciId: get(location, 'state.ciId', '') },
        config: { manual: true }
    });

    const getZbqs = useMockRequest(ApiCollector.getZbqs, {
        data: { ciId: get(location, 'state.ciId', '') },
        config: {
            manual: true,
            onSuccess: (result, params) => {
                // console.log(result,'result')
                const data = get(result, 'data.result', [])
                // console.log(data,'data')
                let newData = []
                if (data && data.length) {
                    data.map((item, index) => {
                        let _times = []
                        let _values = []
                        _times = item.times.length && item.times.map(it => {
                            return it ? dayjs(Number(it)).format('HH:mm') : null
                        })
                        _values = item.values.length && item.values[0].map(it => {
                            return it ? returnFloatTime(it) : null
                        })
                        newData.push({
                            xAxis: _times,
                            lineData: [{
                                name: '今日',
                                value: _values
                            }]
                        })
                    })
                }
                setEchartsData(newData)
            },
            onError: (error) => {
                message.error(error.message);
            },
        }
    });

    useEffect(() => {
        
        if (get(location, 'state.ciId', '')) {
            run()
            getZbqs.run()
        }
    setTitle(get(location, 'state.ciName', ''));
    }, [location])

    if (loading) return <ListLoader />;

    const onClickFull = (title) => {
        setFullScreenOpenOrClose(true)
        setFullScreenTitle(title)
    }

    const onClickFullClose = () => {
        setFullScreenOpenOrClose(false)
    }

    const carDetailContent = () => {
        return data.map((item, index) => (
            <div className={styles.carDetail_content_item} key={index}>
                <div className={styles.content_item_name}>{get(item, 'module', '')}</div>
                <div className={styles.content_item_status} style={{ color: get(item, 'runStatus', '') == "异常" ? 'rgb(224, 32, 32)' : '' }}>{get(item, 'runStatus', '')}</div>
                <div className={styles.content_item_value}>
                    {<span style={{ color: get(item, 'sourceStatusAbnormal', 0) !== 0 ? 'rgb(224, 32, 32)' : '' }}>{get(item, 'sourceStatusAbnormal', 0)}</span>} / {get(item, 'sourceStatusNormal', 0)}</div>
            </div>
        ))
    }
    // console.log(echartsData,'echartsData')
    return <Layout title='陕汽核心系统移动端监控' navbar={true}>
        {fullScreenOpenOrClose ? <div className={styles.fullScreen}>
            <div className={styles.sysResponseTime_top}>
                <div className={styles.sysResponseTime_top_left}>{fullScreenTitle}</div>
                <div className={styles.sysResponseTime_top_img} onClick={() => { onClickFullClose() }}><img src={small} style={{ width: "100%", height: "100%" }} /></div>
            </div>
            {echartsData.length && <Lines data={echartsData[0]} legendShow={false} grid={gridFull}  xAxisInterval={50}/>}
        </div> :
            <>
                <div className={styles.bg}>
                    {/* <ComNavBar title={'系统详情'} onBackClick={(e) => { */}
                    <ComNavBar title={title} onBackClick={(e) => {
                        navigate(routesUrl.systemList);
                    }} />
                </div>
                <div className={styles.carDetail}>
                    <div className={styles.carDetail_title}>
                        <div className={styles.carDetail_title_item}>运维模块</div>
                        <div className={styles.carDetail_title_item}>运行情况</div>
                        <div className={styles.carDetail_title_item}>资源情况(<span><span style={{ color: 'rgb(224, 32, 32)' }}>异常</span>/</span>正常)</div>
                    </div>
                    <div className={styles.carDetail_content}>
                        {carDetailContent()}
                    </div>
                </div>
                <div className={styles.carBtmDiv}>
                    <div className={styles.todayCoreData}>今日核心数据</div>
                    <div className={styles.sysResponseTime}>
                        <div className={styles.sysResponseTime_top}>
                            <div className={styles.sysResponseTime_top_left}>系统响应时间(ms)</div>
                            <div className={styles.sysResponseTime_top_img} onClick={() => { onClickFull('系统响应时间(ms)') }}><img src={big} style={{ width: "100%", height: "100%" }} /></div>
                        </div>
                        {echartsData.length && <Lines part = {true} data={echartsData[0]} legendShow={false} grid={grid} xAxisInterval={50}/>}
                    </div>
                    <div className={styles.sysResponseTime}>
                        <div className={styles.sysResponseTime_top}>
                            <div className={styles.sysResponseTime_top_left}>服务处理请求(次)</div>
                            <div className={styles.sysResponseTime_top_img} onClick={() => { onClickFull('服务处理请求(次)') }}><img src={big} style={{ width: "100%", height: "100%" }} /></div>
                        </div>
                        {echartsData.length && <Lines data={echartsData[1]} legendShow={false} grid={grid}  xAxisInterval={50} yAxisAxisLabelFormatter={(value) => {
                            return `${value}`
                        }} />}
                    </div>
                    <div className={styles.sysResponseTime}>
                        <div className={styles.sysResponseTime_top}>
                            <div className={styles.sysResponseTime_top_left}>数据库处理时间(ms)</div>
                            <div className={styles.sysResponseTime_top_img} onClick={() => { onClickFull('数据库处理时间(ms)') }}><img src={big} style={{ width: "100%", height: "100%" }} /></div>
                        </div>
                        {echartsData.length && <Lines part = {true} data={echartsData[2]} legendShow={false} grid={grid}  xAxisInterval={50}/>}
                    </div>
                    <div className={styles.sysResponseTime}>
                        <div className={styles.sysResponseTime_top}>
                            <div className={styles.sysResponseTime_top_left}>网络响应时间(ms)</div>
                            <div className={styles.sysResponseTime_top_img} onClick={() => { onClickFull('网络响应时间(ms)') }}><img src={big} style={{ width: "100%", height: "100%" }} /></div>
                        </div>
                        {echartsData.length && <Lines data={echartsData[3]} legendShow={false} grid={grid}  xAxisInterval={50}/>}
                    </div>
                </div>
            </>
        }
    </Layout>;

};

export default SystemDetail;